<template>
  <div class="city">
    <ContentBox title="选择城市">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <van-index-bar :z-index="100" :index-list="namelist" :sticky="false">
      <van-index-anchor :index="item.name" v-for="(item, index) in area" :key="index">
        <span>{{item.name}}</span>
        <van-cell :title="it.name" v-for="(it, index) in item.list" :key="index" @click="changeC(it.code, it.name)"/>
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      area: [],
      namelist: []
    }
  },
  methods: {
    getArea () {
      this.$axios.get('/api/baidu/getBaiduCityList').then(res => {
        if (res.status === 200) {
          for (let x in res.data) {
            if (res.data[x].list.length > 0) {
              this.namelist.push(res.data[x].name)
              this.area.push(res.data[x])
            }
          }
        }
      })
    },
    changeC (code, name) {
      localStorage.setItem('cityCode', code)
      localStorage.setItem('cityName', name)
      this.$store.commit('SET_CITYNAME', name)
      this.$store.commit('SET_CITYCODE', code)
      this.$router.replace('/society')
    }
  },
  created () {
    this.getArea()
  }
}
</script>

<style lang="scss">
.city{
  // padding-top: .88rem;
  .van-cell{
    padding-left: 0;
  }
}
</style>
